<template>
	<Layout :showFooter="true">
		<template #title>新增律师</template>
		<uni-forms ref="formRef" :model="formData" :rules="rules" class="crud-form">
			<SectionTitle showLine :showRight="false"><template #title>律师头像</template></SectionTitle>

			<view class="iflex wrap form-portrait">
				<uni-forms-item :label-width="0" name="avatar">
					<UploadImage :limit="1" v-model="formData.avatar"></UploadImage>
				</uni-forms-item>
			</view>

			<SectionTitle showLine :showRight="false"><template #title>基本信息</template></SectionTitle>
			<InfoBlock standard customStyle="margin-top:18rpx;">

				<uni-forms-item label="姓名" name="lawyerName" :label-width="75">
					<uni-easyinput :inputBorder="false" v-model="formData.lawyerName" placeholder="请输入内容"
						placeholder-style="fontSize:30rpx;color:#929292" maxlength="20"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="执业年限" :label-width="75" name="practice">
					<uni-easyinput type="number" :inputBorder="false" v-model.number="formData.practice"
						placeholder="请输入内容" placeholder-style="fontSize:30rpx;color:#929292"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="咨询人数" :label-width="75" name="consultation">
					<uni-easyinput type="number" :inputBorder="false" v-model.number="formData.consultation"
						placeholder="请输入内容" placeholder-style="fontSize:30rpx;color:#929292"></uni-easyinput>
				</uni-forms-item>
			</InfoBlock>

			<SectionTitle showLine :showRight="false"><template #title>擅长</template></SectionTitle>
			<InfoBlock standard customStyle="margin-top:18rpx;" customInnerStyle="padding:10rpx 24rpx 0 24rpx;">
				<uni-forms-item :label-width="0" name="special">
					<view class="flex column fill">
						<uni-easyinput type="textarea" :inputBorder="false" v-model="formData.special"
							placeholder="请输入内容" maxlength="100"></uni-easyinput>
						<view class="iflex fill jcfe" style="font-size: 28rpx; color:#909090;">
							{{formData.special.length}}/100
						</view>
					</view>
				</uni-forms-item>
			</InfoBlock>

		</uni-forms>
		<template #footer>
			<view class="common-footer">
				<u-button v-if="action === Action.Edit"
					:customStyle="{width:'220rpx',border:'none',backgroundColor:'#F6F6F6',color:'#757575'}"
					:hair-line="false" size="large" @click="tapDelete">删除</u-button>
				<u-button :customStyle="{width:action === Action.Edit ?'430rpx':'686rpx'}" type="primary" size="large"
					@click="tapSubmit">提交</u-button>
			</view>
		</template>
	</Layout>
</template>

<script setup lang="ts" name="LawyerEditFile">
	import { ref } from 'vue';
	import { useShowTipMessage } from '@/hooks/util';
	import { isResultSuccess } from '@/utils/http';
	import { Action } from '@/utils/constant';
	import { saveLawyer, getLawyerDetailById, deleteLawyer } from '@/apis/lawfirm';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { isEmpty, backRefresh } from '@/utils/util';

	const action = ref<Action>(Action.Empty);
	const formRef = ref();
	const formData = ref<AnyObject>({
		id: '',
		lawFirmId: '',
		avatar: '',
		lawyerName: '',
		practice: 1,
		consultation: 0,
		special: '',
	});

	const rules = ref({
		avatar: {
			rules: [
				{ required: true, errorMessage: '请上传头像' },
			]
		},
		lawyerName: {
			rules: [
				{ required: true, errorMessage: '请填写名称' },
				{
					minLength: 2,
					maxLength: 20,
					errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		practice: {
			rules: [
				{ required: true, errorMessage: '请填写执业年限' },
				{
					minimum: 1,
					maximum: 100,
					errorMessage: '{minimum} ~ {maximum}',
				}
			]
		},
		consultation: {
			rules: [
				{ required: true, errorMessage: '请填写咨询人数' },
				{
					minimum: 1,
					maximum: 999999999,
					errorMessage: '{minimum} ~ {maximum}',
				}
			]
		},
		special: {
			rules: [
				{ required: true, errorMessage: '请填写擅长' },
				{
					minLength: 1,
					maxLength: 100,
					errorMessage: '内容长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
	})

	function tapDelete() {
		uni.showModal({
			content: '确定要删除吗？',
			confirmColor: '#FF710A',
			success: function (res) {
				if (!res.confirm) return;
				deleteLawyer(formData.value.id).then((res) => {
					if (!isResultSuccess(res, '删除成功')) return;
					backRefresh('lawyer-list-refresh');
				});
			}
		});
	}

	function tapSubmit() {
		formRef.value.validate().then(res => {
			const value = formData.value;
			saveLawyer({ ...value }).then((res) => {
				if (!isResultSuccess(res)) return;
				backRefresh('lawyer-list-refresh');
			});
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}

	onLoad((options) => {
		options = options as { lawFirmId : string; id : string; action : Action }
		formData.value.lawFirmId = options.lawFirmId;
		formData.value.id = options.id;
		action.value = options.action ?? Action.Add;
		console.log(action.value === Action.Edit);
		if (action.value === Action.Edit) {
			getLawyerDetailById(options.id).then((res) => {
				formData.value = res.data;
			});
		}
	});
</script>

<style lang="scss">
	.form-portrait {
		margin-left: 32rpx;
		width: 686rpx;
	}

	.uni-forms-item__label {
		// width: 150rpx !important;
		font-size: 30rpx !important;
		color: black !important;
	}

	.uni-forms-item__content {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.uni-input-placeholder {
		text-align: right;
	}

	.uni-forms-item__error {
		text-align: right;
		left: auto !important;
		right: 0 !important;
	}

	.uni-easyinput__content-input {
		text-align: right;
	}

	.uni-easyinput__placeholder-class {
		font-size: 28rpx !important;
		color: #909090 !important;
	}
</style>